<h1 class="description"><%= @query.description %></h1>

<div id="query-actions">
  <button class="btn btn-success star<% if @query.starred %> starred<% end %>">
    <span class="unstarred-contents">
      <i class="icon-star-empty icon-white"></i>
      Star
    </span>
    <span class="starred-contents">
      <i class="icon-star icon-white"></i>
      Starred
    </span>
  </button>
  <button class="btn edit<% unless @query.named? %> active<% end %>" data-toggle="button">
    <i class="icon-pencil"></i>
    Edit
  </button>
  <a class="btn file<% unless @query.succeeded? && @headers %> disabled<% end %>" href="/queries/<%= @query.id %>/download">
    <i class="icon-file"></i>
    Download
  </a>
</div>

<dl class="dl-horizontal query-properties">
  <dt>Author</dt>
  <dd class="author"><%= @query.author %>&nbsp;</dd>
  <dt>Started at</dt>
  <dd><%= @query.formatted_start_time %></dd>
  <% if @query.finished_at %>
  <dt>Finished at</dt>
  <dd><%= @query.formatted_finish_time %> (<%= @query.elapsed_time %>)</dd>
  <% end %>
</dl>

<form class="well form-inline" id="query-properties-form">
  <input type="text" class="input-small author" name="author" placeholder="Author" value="<%= @query.author %>" />
  <input type="text" class="span8 name" name="name" placeholder="Description" value="<%= @query.name %>" />
  <input type="submit" class="btn" name="submit" value="Save" />
</form>

<div id="query-sql-container">
  <div id="query-sql-actions">
    <a class="btn btn-mini" href="/?q=<%= URI.escape(@query.query) %>"><i class="icon-edit"></i> Send to editor</a>
    <a class="btn btn-mini" href="/?q=<%= URI.escape(@query.query) %>&run=1"><i class="icon-repeat"></i> Rerun</a>
  </div>
  <pre class="cm-s-default"><%= @query.query %></pre>
</div>

<div id="loading">
  <div class="alert">
    <div class="cancel-container">
      <a class="btn btn-mini btn-warning cancel">Cancel</a>
    </div>
    <span id="spinner"></span>
    Executing query...
  </div>
</div>

<div id="error" class="alert alert-error">
  <strong>Problem!</strong>
  <span class="message"></span>
</div>

<div id="results">
  <div class="alert alert-success">
    <strong>Success!</strong>
    Query returned <span class="row-count"></span> row<span class="row-count-plural">s</span>.
  </div>

  <table class="table table-condensed" id="results-table">
    <thead>
      <tr class="headers"></tr>
    </thead>
    <tbody class="results"></tbody>
  </table>
</div>

<script type="text/javascript">
  var id = window.location.href.match(/queries\/([0-9]+)/)[1];

  var query = new Query(id);
  var callbacks = {
    success: function(query) {
      $('#loading, #error').hide();
      $('#results')
        .show()
        .find('.row-count')
          .text(query.results.length - 1)
        .end()
        .find('.row-count-plural')
          .toggle(query.results.length !== 2);

      var headerRow = $('#results .headers').empty();
      var container = $('#results .results').empty();

      for (var i = 0; i < query.results[0].length; i++) {
        headerRow.append('<th>' + query.results[0][i] + '</th>');
      }

      for (var i = 1; i < query.results.length; i++) {
        var result = query.results[i];
        var row = $('<tr></tr>');

        for (var j = 0; j < result.length; j++) {
          if (result[j]) {
            row.append($('<td></td>').text(result[j]));
          } else {
            row.append('<td class="null">null</td>');
          }
        }

        container.append(row);
      }
    },
    error: function(error) {
      $('#loading, #results').hide();
      $('#error')
        .show()
        .find('.message')
          .text(error);
    }
  };

  $('#results, #error').hide();

  <% if @query.succeeded? || @query.error %>
    $('#loading').hide();
    query.load(callbacks);
  <% else %>
    query.monitor(callbacks);
  <% end %>

  $('#loading .cancel').click(function(e) {
    e.preventDefault();
    query.cancel();
  });

  var opts = {
    lines: 11,
    length: 4,
    width: 2,
    radius: 4,
    color: '#C09853',
    speed: 1.2,
    trail: 60
  };
  var target = document.getElementById('spinner');
  var spinner = new Spinner(opts).spin(target);

  var queryNode = $('pre.cm-s-default');
  CodeMirror.runMode(queryNode.text(), 'mysql', queryNode[0]);
  $('a.disabled').click(function(e) {
    e.preventDefault();
  });
</script>
